<script setup lang="ts">
import { onMounted, reactive } from "vue";
import TitleVue from '@/components/Title.vue';
import BannerVue from './components/Banner.vue';
import ProjectVue from './components/Project2.vue';
import NewsVue from './components/News.vue';
import KeyProjectsVue from './components/KeyProjects.vue';
import BusinessVue from './components/Business.vue';
import BrandDesignVue from './components/BrandDesign.vue';
import FilmVue from './components/Film.vue';
import ConferenceExhibitionVue from './components/ConferenceExhibition.vue';
import CooperativeOrganizationVue from './components/CooperativeOrganization.vue';
import InformationVue from './components/Information.vue';
import MapsVue from './components/Maps.vue';
import ButtonVue from '@/components/More.vue';
import DotDom from '@/components/Dot.vue'
import { getHome } from '@/api'

const state = reactive({
  banner: [] as Array<Record<string, string>>,
  consultation: [],
  cooperation: [],
  news: {} as Record<string, any>,
  projects: [],
  brandDesign: [],
  business: [],
  film: [],
  conferenceExhibition: [],
  isShow: false,
  lastDemo: '',
  index: 0,
})
onMounted(() => {
  getHome().then((res: any) => {
    const { banner, international, design, moves, exhibition, news, cooperation, consultation } = res
    state.banner = banner
    state.consultation = consultation
    state.cooperation = cooperation
    state.news = news
    state.brandDesign = design
    state.business = international
    state.film = moves.bottom_list
    state.conferenceExhibition = exhibition
  })

  const intersectionObserver = new IntersectionObserver((entires) => {
    entires.forEach((entry, index) => {
      const { target: { className }, isIntersecting } = entry
      if (isIntersecting) {
        state.isShow = true
        state.lastDemo = className
        state.index = +((entry.target as HTMLElement).dataset.id || 0)
      } else {
        if ((className === 'demo demo1' && state.lastDemo === 'demo demo1') || (className === 'demo demo5' && state.lastDemo === 'demo demo5')) {
          state.isShow = false
        }
      }
    })
  }, { threshold: 0.5 });

  queryFn('.demo').forEach((item: any) => {
    intersectionObserver.observe(item);
  });
})
const queryFn = (selector: string) => {
  return Array.from(document.querySelectorAll(selector));
}
const handleChange = (num: number) => {
  let dom = document.querySelector(`.demo${num + 1}`)
  state.index = num
  dom?.scrollIntoView({ behavior: "smooth" })
}

</script>

<template>
  <BannerVue :list="state.banner"></BannerVue>
  <TitleVue title="十大项目中心" desc="Project Centres" :show="false"></TitleVue>
  <ProjectVue></ProjectVue>
  <TitleVue title="新闻资讯" desc="News"></TitleVue>
  <NewsVue :obj="state.news"></NewsVue>
  <div class="demo demo1" data-id="0">
    <TitleVue title="重点项目" desc="Major Projects"></TitleVue>
    <KeyProjectsVue></KeyProjectsVue>
  </div>
  <div class="demo demo2" data-id="1">
    <TitleVue title="国际事务合作" desc="International Cooperation"></TitleVue>
    <BusinessVue :list="state.business"></BusinessVue>
  </div>
  <div class="demo demo3" data-id="2">
    <TitleVue title="品牌设计" desc="Brand Design"></TitleVue>
    <BrandDesignVue :list="state.brandDesign"></BrandDesignVue>
    <div class="flex-center mt-2">
      <ButtonVue :path="`/project/list?code=classify_2d4c88a`">MORE</ButtonVue>
    </div>
  </div>
  <div class="demo demo4" data-id="3">
    <TitleVue title="影视合作" desc="Film Collaboration"></TitleVue>
    <FilmVue :list="state.film"></FilmVue>
    <div class="flex-center mt-2">
      <ButtonVue :path="`/project/list?code=classify_1a50d44`">MORE</ButtonVue>
    </div>
  </div>
  <div class="demo demo5" data-id="4">
    <TitleVue title="会务会展" desc="Conference & Exhibition"></TitleVue>
    <ConferenceExhibitionVue :list="state.conferenceExhibition"></ConferenceExhibitionVue>
    <div class="flex-center mt-2">
      <ButtonVue :path="`/project/list?code=classify_3c6d1de`">MORE
      </ButtonVue>
    </div>
  </div>
  <TitleVue title="合作机构" desc="Partner Institutions"></TitleVue>
  <CooperativeOrganizationVue :list="state.cooperation"></CooperativeOrganizationVue>
  <TitleVue title="行业资讯" desc="Industry Leads"></TitleVue>
  <InformationVue :list="state.consultation"></InformationVue>
  <MapsVue></MapsVue>
  <div v-show="state.isShow">
    <DotDom :current="state.index" @change="handleChange"></DotDom>
  </div>
</template>

<style lang="scss" scoped>

</style>
